import {
    Component,
    OnInit,
    HostBinding,
    ViewChild,
    trigger,
    transition,
    animate,
    style,
    state
} from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map'

@Component({
    selector: 'app-business-list',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.scss'],
    animations: [
        trigger('routeAnimation', [
            state('*',
                style({
                    opacity: 1,
                    transform: 'translateX(0)'
                })
            ),
            transition(':enter', [
                style({
                    opacity: 0,
                    transform: 'translateX(150px)'
                }),
                animate('0.35s ease-in-out')
            ])
        ])
    ]
})
export class BusinessListComponent implements OnInit {
    @HostBinding('@routeAnimation') get routeAnimation() {
        return true;
    };

    @HostBinding('style.display') get display() {
        return 'block';
    };

    @ViewChild('grid') grid;

    constructor(private http: Http) { };

    business: any[];
    pageNumber: number = 1;
    pageSize: number = 8;
    totalPage: number = 0;
    searchParam: string = '';

    ngOnInit() {
        let grid = this.grid.nativeElement;
        this.http.get(`/assets/test.json`)
            .map((res: Response) => res.json())
            .subscribe(json => {
                this.business = json.data;
                grid.columns[0].renderer = cell => cell.element.textContent = cell.row.index;
            });
    };

    itemSelect(event: any) {
        let grid = event.target;
        let selected = grid.selection.selected();
        if (selected.length == 1) {
            grid.getItem(selected, function(error, item) {
                if (!error) {
                    // The getUserDetails should return HTML.
                    console.log(item);
                };
            });
        }

    };
}
